import React, { useState, useCallback, useEffect } from 'react'
import { SimpleSelector } from './simpleSelector'
import { NotifyType } from '../../common/enums'
import { notify } from '../../source/notify'
import { getAllStepCollections } from '../../source/getData'

export const StepCollectionSelector = ({ stepCollectionId, onSelectItem, readOnly = false }) => {
    const [dataSource, setDataSource] = useState([])
    const filterDataSource = useCallback(value => item => item.url.includes(value) || item.title.includes(value), [])
    const getItemValue = useCallback(item => item.id, [])
    const renderItem = useCallback(item => item.title, [])

    useEffect(() => {
        getAllStepCollections()
            .then(data => setDataSource(data))
            .catch(err => notify(NotifyType.error, err))
    }, [])

    return <SimpleSelector dataSource={dataSource} filterDataSource={filterDataSource}
        getItemValue={getItemValue} initValue={stepCollectionId} onSelectItem={onSelectItem}
        readOnly={readOnly} renderItem={renderItem} />
}